<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup lv-form-label-required">
    <lv-form-item>
        <lv-form-label>
            {{'protection_object_set_name_label' | i18n}}
        </lv-form-label>
        <lv-form-control style="width:420px" [lvErrorTip]="nameErrorTip">
            <input lv-input type="text" formControlName="name">
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>
            {{'common_object_storage_label' | i18n}}
        </lv-form-label>
        <lv-form-control style="width:420px" [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select [lvOptions]="objectOptions" formControlName="objectStorage" lvValueKey="value" lvMode="single"
                [lvDisabled]="!!rowData" [lvContentTemplate]="contentTpl"></lv-select>
            <ng-template #contentTpl let-item>
                <lv-group lvGutter="4px">
                    <span lv-overflow>{{ item.label }}</span>
                    <span class="guide-recommend-label" *ngIf="showGuideNew(item)">
                        {{'protection_guide_new_resource_label' | i18n}}
                    </span>
                </lv-group>
            </ng-template>
        </lv-form-control>
    </lv-form-item>
</lv-form>

<div>
    <h2 class="header">{{'protection_object_set_label' | i18n}}</h2>
    <lv-group lvGutter="8px">
        <div class="hive-all-table">
            <div class="custom-table-header">
                {{'protection_selectable_object_label' | i18n}}
            </div>
            <lv-datatable [lvData]="tableData" #lvTable [lvScroll]="{ y: '420px' }" [lvPaginator]="pageA" lvSize="small"
                lvAsync="false" lvMultiGroup lvSelectionMode="multiple" [lvSelection]="selectionTable"
                (lvSelectionChange)="selectionChange($event)" lvCompareWith="name">
                <thead>
                    <tr>
                        <th lvShowCheckbox width="64px" [lvRowsData]="lvTable.renderData"></th>
                        <th>
                            <span>{{ 'common_name_label' | i18n}}
                                <i lv-icon="lv-icon-search" [lvColorState]="true" lv-popover
                                    [lvPopoverContent]="objectTpl" lvPopoverTheme="light" lvPopoverPosition="bottom"
                                    lvPopoverTrigger="click" #objectPopover="lvPopover"
                                    [ngClass]="{active: !!name?.length}"></i>
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <ng-container *ngFor="let item of lvTable.renderData;">
                        <tr style="height: 48px;">
                            <td width="64px" lvShowCheckbox [lvRowData]="item"></td>
                            <td>
                                <div lv-overflow style="width: 300px;">
                                    <i lv-icon="aui-icon-directory"></i>
                                    {{item.name}}
                                </div>
                            </td>
                        </tr>
                    </ng-container>
                </tbody>
            </lv-datatable>
            <ng-container *ngIf="totalTable > 0">
                <lv-paginator #pageA lvMode="simple" lvShowPageSizeOptions="false" class="table-paginator"
                    [lvPageSize]="pageSize" [lvPageIndex]="pageIndex" [lvTotal]="totalTable"
                    (lvPageChange)="pageChange($event)">
                </lv-paginator>
            </ng-container>
        </div>
        <div class="arrow-container">
            <i lv-icon="lv-icon-arrow-next" class="auto-protect-help" lvColorState="true"></i>
        </div>
        <div class="hive-selected-table">
            <lv-datatable [lvData]="selectedTableData" #lvSelectTable [lvScroll]="{ y: '420px' }" [lvPaginator]="pageS"
                lvSize="small">
                <thead>
                    <tr>
                        <th>
                            <lv-group class="th-group" style="height: 24px;">
                                <lv-group lvGutter="8px">
                                    <span>
                                        {{'protection_selection_object_label' | i18n}}
                                    </span>
                                </lv-group>
                                <span class="aui-link" (click)="clearSelected()">
                                    {{'protection_clear_all_label' | i18n}}
                                </span>
                            </lv-group>
                        </th>
                    </tr>
                    <tr>
                        <th>
                            <lv-group lvGutter="8px" style="height: 16px;">
                                <span>
                                    {{ 'common_name_label' | i18n }}
                                    <i lv-icon="lv-icon-search" [lvColorState]="true" lv-popover
                                        [lvPopoverContent]="selectedObjectTpl" lvPopoverTheme="light"
                                        lvPopoverPosition="bottom" lvPopoverTrigger="click"
                                        #selectedObjectPopover="lvPopover"
                                        [ngClass]="{active: !!selectedName?.length}"></i>
                                </span>
                            </lv-group>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of lvSelectTable.renderData;trackBy: trackByName">
                        <td>
                            <lv-group class="th-group" style="height: 37px;">
                                <span lv-overflow style="width: 300px;">{{ item?.name | nil }}</span>
                                <i lv-icon="lv-icon-close" lvTooltipTheme="light" lvColorState="true"
                                    (click)="removeSingle(item)"></i>
                            </lv-group>
                        </td>
                    </tr>
                </tbody>
            </lv-datatable>
            <ng-container *ngIf="selectedTableData.length > 0">
                <lv-paginator #pageS lvMode="simple" lvShowPageSizeOptions="false" class="table-paginator"
                    [lvPageSize]="pageSize" [lvPageIndex]="pageIndexS" [lvTotal]="selectedTableData.length"
                    (lvPageChange)="pageChangeS($event)">
                </lv-paginator>
            </ng-container>
        </div>
    </lv-group>
</div>
<div>
    <lv-group class="header" lvGutter='2px'>
        <h2>{{'protection_object_filter_condition_label'| i18n}}</h2>
        <i lv-icon="aui-icon-help" [lv-tooltip]="prefixTipTpl" lvTooltipPosition="rightTop" lvTooltipTheme="light"
            lvColorState='true'></i>
    </lv-group>
    <ng-container *ngIf="filters">
        <ng-container *ngFor="let item of filters">
            <div class="filter">
                <lv-datatable lvFake="true" lvSize="small">
                    <thead>
                        <tr>
                            <th>
                                <lv-group class="th-group" style="height: 24px;width: 870px;">
                                    <lv-group lvGutter="8px">
                                        <span lv-overflow style="width: 100px;"> {{item.name}}</span>
                                    </lv-group>
                                    <span class="aui-link" (click)="deleteFilter(item)">{{'common_delete_label' |
                                        i18n}}</span>
                                </lv-group>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="filter-row">
                                <lv-group lvGutter="10px">
                                    <span>{{'common_subnet_prefix_label' | i18n}}</span>
                                    <lv-group lvDirection="vertical" lvGutter="7px" style="width: 80%;">
                                        <lv-multi-autocomplete [(ngModel)]="item.data" [lvAllowNewItem]="true"
                                            [lvShowNoData]="false" [lvDisabled]="disabled" class="filter-input"
                                            lvPlaceholder="{{'common_plus_enter_label' | i18n}}{{i18n.isEn?' ':''}}prefix"
                                            (ngModelChange)="ngModelChange($event, item)" [lvTagTemplate]="prefixTpl"
                                            [ngClass]="{'red-object-bucket':item?.error}">
                                        </lv-multi-autocomplete>
                                        <span class="error-row" *ngIf="item?.error">
                                            <i lv-icon="aui-icon-job-status-fail"></i>
                                            {{item.errorTip}}
                                        </span>
                                    </lv-group>
                                </lv-group>
                            </td>
                        </tr>
                    </tbody>
                </lv-datatable>
            </div>
        </ng-container>
    </ng-container>
    <span class="aui-link">
        <button lv-button lvType="link" #popover="lvPopover" lv-popover [lvPopoverHeader]="titleTemplate"
            [lvPopoverContent]="contentTemplate" lvPopoverTheme="light" lvPopoverTrigger="customize"
            lvPopoverShowArrow="false" lvPopoverTheme="light" lvPopoverTrigger="click"
            lvPopoverClassName="object-filter-pop" lvPopoverPosition="topLeft">
            <i lv-icon="aui-icon-add-enable"></i>
            <span class="text-middle">{{'common_new_add_label' | i18n}}</span>
        </button>
    </span>
</div>

<ng-template #objectTpl>
    <lv-search [(ngModel)]="name" (lvSearch)="searchObjectName($event)" [lvFocus]="true"
        style="width: 200px;"></lv-search>
</ng-template>

<ng-template #selectedObjectTpl>
    <lv-search [(ngModel)]="selectedName" (lvSearch)="searchSelectedObjectName($event)" [lvFocus]="true"
        style="width: 200px;"></lv-search>
</ng-template>

<ng-template #prefixTipTpl>
    <span [innerHTML]="(isAps? prefixTipApsLabel: prefixTipLabel)"></span>
</ng-template>

<ng-template #titleTemplate>
    <span class="aui-text-desc">
        {{'protection_object_set_filter_info_label' | i18n}}
    </span>
</ng-template>

<ng-template #contentTemplate>
    <div class="pop-box">
        <ng-container *ngFor="let item of selectedTableData">
            <span class="pop-content" (click)="addFilter(item.name)" *ngIf="!item.chosen">
                <span lv-overflow style="width: 200px;">{{item.name}}</span>
            </span>
        </ng-container>
    </div>
</ng-template>